<template>
  <div class="app-card-large" :style="{ height: cardHeight }">
    <div class="app-card-shadow app-card-large-inner">
      <div class="app-card-head" v-if="showHead">
        <span class="app-card-title">{{ title }}</span>
        <div class="app-card-action" v-if="slots.action">
          <slot name="action"></slot>
        </div>
      </div>
      <div class="app-card-body">
        <slot name="default"></slot>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { px2vw } from '@/utils/px2vw.js';
  const slots = defineSlots();
  const props = defineProps({
    title: {
      type: String,
    },
    showHead: {
      type: Boolean,
      default: true,
    },
    height: {
      type: [Number, String],
      default: px2vw(300),
    },
  });

  const cardHeight = computed(() => {
    if (typeof props.height === 'number') {
      return px2vw(props.height);
    }
    return props.height;
  });
</script>
